<template>
  <Card>
    <JG-search
      :searchData="searchData"
      @on-input-search="askDatasearch"
      @on-change-search="askDatasearchs"
      @click="askDataclick"
      @click-changebut="handleEdit(false)"
    />
    <JG-table
      :params="params"
      :data="data"
      :columns="columns"
      :loading="loading"
      :total="total"
      :butshow="butshow"
      @askData="askData"
      @handleReset="handleReset"
      @handleUnbind="handleUnbind"
      @handleUnbound="handleUnbound"
      @handleDepart="handleDepart"
      @handleActionLog="handleActionLog"
      @sortchange="sortchange"
    ></JG-table>
    <addmodal ref="addmodal" @askData="askData"></addmodal>
    <modal ref="modal" @askData="askData" />
    <modalbind ref="modalbind" @askData="askData" />
  </Card>
</template>
<script>
import {
  rbacmembermemberlist,
  rbacmembersyncmember,
  rbacmemberchangepassword,
  rbacmemberQuit
} from "@api/peoplesetting";
import modal from "./modal";
import modalbind from "./modalbind";
import addmodal from "./addmodal";
export default {
  components: { modal, modalbind, addmodal },
  name: "",
  data() {
    return {
      butshow: {
        Reset: {
          name: "-v1-rbac-member-change-password",
          flag: "/v1/rbac/member/change-password",
        },
        Unbind: {
          name: "-v1-rbac-member-unbind-project",
          flag: "/v1/rbac/member/unbind-project",
        },
        Bind: {
          name: "-v1-rbac-member-bind-project",
          flag: "/v1/rbac/member/bind-project",
        },
        ActionLog: { name: "-34", flag: "/" },
        Unbound: {
          name: "-v1-rbac-member-update-member",
          flag: "/v1/rbac/member/update-member",
        },
        Depart: {
          name: "-v1-rbac-member-quit",
          flag: "/v1/rbac/member/quit",
        },
      },
      modal: false,
      loading: false,
      addloading: false,
      total: 0,
      params: { keyword: "", page: 1, pageSize: 10 },
      searchData: {
        left: [
          {
            id: 1,
            key: "Input",
            value: "",
            clearable: true,
            placeholder: "请输入人员姓名或手机号码",
            callback: "search",
            style: { width: "250px" },
          },
          {
            id: 2,
            key: "Button",
            value: "新增",
            addloading: false,
            callback: "changebut",
            has: {
              name: "-v1-rbac-member-member-record",
              flag: "/v1/rbac/member/member-record",
            },
          },
        ],
        // right: [
        //   {
        //     id: 1,
        //     key: "Button",
        //     value: "同步钉钉",
        //     loading: false,
        //     has: {
        //       name: "-v1-rbac-member-sync-member",
        //       flag: "/v1/rbac/member/sync-member",
        //     },
        //   },
        // ],
      },
      columns: [
        { title: "ID", key: "id", width: 80, fixed: "left" },
        { title: "姓名", slot: "realname", width: 180, fixed: "left" },
        { title: "手机号", key: "mobile", minWidth:180 },
        { title: "已属项目", slot: "project_name_arr", minWidth: 300 },
        { title: "角色", slot: "role_name_arr", width: 280 },
        { title: "用户状态", key: "status_str",sortable: 'custom',
        render: (h, params) => {
                            return h('div', {
                                         prop: {
                                             type: 'text',
                                             value: params.row.status_str
                                         },
                                         style: {
                                             color: params.row.status_str == '启用' ? '#19be6b' : 'red'
                                         },
                                         on: {
                                             // that.getStatusCode(value)
                                         }
                                     },params.row.status_str )
                        },
        width: 140 },
        { title: "登录次数", key: "visit_count", width: 100 },
        { title: "最后登录时间", key: "last_time", width: 160 },
        { title: "最后登录IP", key: "last_ip", width: 140 },
        {
          title: "操作",
          slot: "peoplesettingAction",
          width: 350,
          fixed: "right",
        },
      ],
      data: [],
      timer: null,
    };
  },
  mounted() {
    this.initial();
  },
  methods: {
    sortchange (e) {
        switch (e.sort) {
        case 1: this.params.status_order = 'asc'; break;
        case 2: this.params.status_order = 'desc'; break;
        default: this.params.status_order = ''; break;
        }
        switch (e.key) {
        case 'status_order': this.params.column = 'status_str'; break;

        default: break;
        }
        this.askData();
        },
    initial() {
      this.askData();
    },
    askDatasearchs() {
      this.searchData.left.forEach((item) => {
        if (item.id === 1) {
          item.value = item.value
            .replace(/(^\s*)|(\s*$)/g, "")
            .replace(/(^\http:\/\/*)|(\/*$)/g, "")
            .replace(/(^\https:\/\/*)|(\/*$)/g, "");
        }
      });
      this.askDatasearch();
    },
    askData(res) {
      this.loading = true;
      clearTimeout(this.timer);
      let time = 0;
      if (this.params.keyword) {
        time = 2000;
      }
      this.timer = setTimeout(() => {
        rbacmembermemberlist(this.params)
          .then((res) => {
            this.total = res.total;
            this.data = res.list;
            if (this.params.keyword && this.total == 0) {
              this.$Message.destroy();
              this.$Message.error(
                `未搜索到${this.params.keyword}，可以尝试先同步钉钉，然后在尝试搜索`
              );
            }
            this.loading = false;
          })
          .catch(() => {
            this.loading = false;
          });
      }, time);
    },
    askDatasearch() {
      this.params.keyword = this.searchData.left[0].value;
      this.params.page = 1;
      this.params.pageSize = 10;
      this.askData();
    },
    askDataclick() {
        //console.log(111)
      this.searchData.right[0].loading = true;
      rbacmembersyncmember().then((res) => {
        //console.log(res,'3')
        if(res.code===422){
            this.searchData.right[0].loading = false;
        }else{
            this.$Message.success("同步成功(5分钟内多次同步无效)");
            this.searchData.right[0].loading = false;
            this.askData();
        }
       
      });
    },
    handleEdit() {
      //console.log("qqqq");
      this.$refs.addmodal.initial();
    },
    handleReset(row) {
      this.$Modal.confirm({
        title: "重置密码",
        content: `<p>重置后用户的初始密码为：<strong class="red">jgwl123456</strong></p>`,
        onOk: () => {
          let params = {
            id: row.id,
            password: "jgwl123456",
          };
          rbacmemberchangepassword(params).then(() => {
            this.$Message.success("重置成功");
          });
        },
      });
    },
    //离职人员操作
    handleDepart(row){
        this.$Modal.confirm({
        title: "离职",
        content: `<p>确定将当前员工设为离职人员吗？</p>`,
        onOk: () => {
          let params = {
            id: row.id,
          };
          rbacmemberQuit(params).then(() => {
            this.$Message.success("设为离职成功");
          });
        },
      });
    },
    handleUnbound(row) {
      if (row.type) this.$refs.modalbind.initial(row);
      else this.$refs.modal.initial(row);
    },
    handleActionLog(row) {
      this.$router.push({ path: "/oplog", query: { id: row.id } });
    },
    handleUnbind(row) {
      this.$refs.modal.initials(row);
    },
  },
};
</script>
